<template>
  <div>
    <div class="tabs">
      <div class="ele" v-for="(item, index) in viewType.list" :key="index" :class="{ act: item.active }"
        @click="viewType.active(item)">
        {{ item.label }}</div>
    </div>
  </div>
</template>

<script>
class AA {
  constructor() {
    this.label = 'AA'
    this.active = true
  }
}
class BB {
  constructor() {
    this.label = 'BB'
    this.active = false
  }
}
class CC {
  constructor() {
    this.label = 'CC'
    this.active = false
  }
}
class DD {
  constructor() {
    this.label = 'DD'
    this.active = false
  }
}
class ViewType {
  constructor({ aa, bb, cc, dd }) {
    this.aa = aa
    this.bb = bb
    this.cc = cc
    this.dd = dd
    this.activeObj = this.aa
    this.list = [this.aa, this.bb, this.cc, this.dd]
  }
  active(itemObj) {
    if (itemObj.active) return
    this.activeObj.active = false
    itemObj.active = true
    this.activeObj = itemObj
  }
}

export default {
  data() {
    const aa = new AA()
    const bb = new BB()
    const cc = new CC()
    const dd = new DD()
    const viewType = new ViewType({ aa, bb, cc, dd })
    return {
      viewType

    }
  },
  mounted() {
    // console.log('-----1', this.viewType)
  }


}
</script>

<style scoped>
.tabs {
  width: 50%;
  display: flex;
  border: 1px solid #00a0e9;
  border-radius: 5px;
  margin: 10px auto;
  padding: 1px;
  font-size: 10px;
}

.ele {
  width: 25%;
  text-align: center;
  cursor: pointer;
}

.act {
  background-color: #00a0e9;
  border-radius: 5px;
  color: #ffff;
}
</style>